<!DOCTYPE html>
<html>
   <head>
      <title>相册列表</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="/css/bootstrap.min.css" rel="stylesheet">
      <script src="/js/jquery.min.js"></script>
      <style type="text/css">
         #file-image{
            width: 100%;
            height: 40px;
            background: #3092F5;
            border-radius: 3px;
            line-height: 40px;
            color: #fff;
            text-align: center;
            cursor: pointer;
         }
      </style>
 
   </head>
   <body>
      <div class="container" style="margin-top: 10px;">
         <div>
         <!-- Nav tabs -->
         <ul class="nav nav-tabs" role="tablist">
            <li><a href="http://www.lyang.top" class="btn btn-info">首页</a></li>
            <li><a href="javascript:void(0);" class="btn btn-info" data-toggle="modal" data-target="#myModal">创建相册</a></li>
           
         </ul>

         <!-- Tab panes -->
         <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="home" style="padding: 30px 0px;">

               <!--model开始-->
               <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
                  <div class="modal-dialog" role="document">
                     <div class="modal-content">
                     <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">创建相册</h4>
                     </div>
                     <div class="modal-body">
                        <form class="form-horizontal" action="/createBox" method="post">
                           <div class="form-group">
                              <label for="inputEmail3" class="col-sm-2 control-label">相册名称</label>
                              <div class="col-sm-10">
                                 <input type="text" class="form-control" id="inputEmail3" placeholder="相册名称" name="imgbox_name">
                              </div>
                           </div>
                           <div class="form-group">
                              <label for="textarea" class="col-sm-2 control-label">描述</label>
                              <div class="col-sm-10">
                                 <textarea class="form-control" rows="3" name="imgbox_desc"  id="textarea"></textarea>
                              </div>
                           </div>
                           <div class="form-group">
                              <div class="col-sm-offset-2 col-sm-10">
                                 <button type="submit" class="btn btn-default">确定</button>
                              </div>
                           </div>
                        </form>
                     </div>
                     <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" id="btnClose">关闭</button>
                     </div>
                     </div><!-- /.modal-content -->
                  </div><!-- /.modal-dialog -->
               </div><!-- /.modal -->

               
               <div class="row">
                  <% for(var i=0;i<data.length;i++) { %>
                  <div class="col-sm-4 col-md-3">
                     <a href="/images/<%= data[i].id %>" >
                        <div class="thumbnail">
                           <img src="/images/1.jpg">
                           <div class="caption" style="overflow: hidden;">
                           <h4 class="pull-left"><%= data[i].imgbox_name %></h4>
                           <h4 class="pull-right"><small><%= data[i].count %>张</small></h4>
                           <div style="clear: both;"></div>
                           <p><%= data[i].imgbox_desc %></p>
                           </div>
                        </div>
                     </a>
                  </div>
                  <% } %>
               </div>
            </div>
           
         
         </div>

      </div>
      </div>
         
      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="/js/jquery.min.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="/js/bootstrap.min.js"></script>
   </body>
</html>